<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-header">
            <div class="stat-card-title">我的课程</div>
            <i class="el-icon-reading stat-card-icon"></i>
          </div>
          <div class="stat-card-value">{{ courseCount }}</div>
          <div class="stat-card-footer">
            <el-button type="text" @click="$router.push('/courses')">查看全部</el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-header">
            <div class="stat-card-title">学生数量</div>
            <i class="el-icon-user stat-card-icon"></i>
          </div>
          <div class="stat-card-value">{{ studentCount }}</div>
          <div class="stat-card-footer">
            <el-button type="text" @click="$router.push('/students')">查看全部</el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-header">
            <div class="stat-card-title">总课时</div>
            <i class="el-icon-time stat-card-icon"></i>
          </div>
          <div class="stat-card-value">{{ lessonCount }}</div>
          <div class="stat-card-footer">
            <el-button type="text" @click="$router.push('/lessons')">查看全部</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 快捷操作 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>快捷操作</span>
      </div>
      <div class="quick-actions">
        <el-button type="primary" icon="el-icon-plus" @click="$router.push('/course/create')">创建课程</el-button>
        <el-button type="success" icon="el-icon-upload" @click="$router.push('/material/create')">添加课件笔记</el-button>
        <el-button type="warning" icon="el-icon-s-cooperation" @click="$router.push('/live')">发起直播</el-button>
        <el-button type="info" icon="el-icon-s-data" @click="$router.push('/statistics')">查看统计</el-button>
      </div>
    </el-card>
    
    <!-- 最近课程 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>最近课程</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/courses')">查看全部</el-button>
      </div>
      <el-table :data="recentCourses" style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="课程名称" width="250"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '已发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="enrollCount" label="学生数量"></el-table-column>
        <el-table-column prop="lessonCount" label="课时数"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="$router.push(`/course/edit/${scope.row.id}`)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getTeacherCourses, deleteCourse } from '@/api/course';

export default {
  name: 'Dashboard',
  data() {
    return {
      courseCount: 0,
      studentCount: 0,
      lessonCount: 0,
      recentCourses: [],
      loading: false
    };
  },
  computed: {
    ...mapGetters(['teacherId'])
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      if (!this.teacherId) return;
      
      this.loading = true;
      getTeacherCourses(this.teacherId, 1, 5)
        .then(response => {
          const { data } = response;
          if (data && data.records) {
            this.recentCourses = data.records;
            this.courseCount = data.total || 0;
            
            // 计算学生总数和课时总数
            let studentCount = 0;
            let lessonCount = 0;
            data.records.forEach(course => {
              studentCount += course.enrollCount || 0;
              lessonCount += course.lessonCount || 0;
            });
            this.studentCount = studentCount;
            this.lessonCount = lessonCount;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDelete(id) {
      this.$confirm('确认删除该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCourse(id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .stat-card {
    height: 150px;
    
    .stat-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .stat-card-title {
        font-size: 16px;
        color: #606266;
      }
      
      .stat-card-icon {
        font-size: 24px;
        color: #409EFF;
      }
    }
    
    .stat-card-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 20px;
    }
  }
  
  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style> 